<template>
  <div>
    <!-- 个人中心 -->
    <div class="accountBox" >
<!--      :class="{'accountBox-open': !collapsed}"-->
      <div class="accountBoxInner" style="display: flex;align-items: center;">
        <div style="margin-right: 30px;" v-if="false">
          <div style="font-size: 1.4rem;color: white;display: flex;align-items: center;cursor: pointer" @click="myBusinessModal=!myBusinessModal,myapplicationReadFlag=true">
            <span style="margin-right: 5px">{{$t('mybusiness')}}</span>
            <a-badge v-if="!this.myreviewReadFlag||!this.myapplicationReadFlag" :count="mybusinessCount" :number-style="{height:'15px',minWidth:'15px',lineHeight:'15px',padding:0,border:0}"/>
          </div>
          <div>
            <a-modal
              title=""
              class="myBusinessModal"
              :visible="myBusinessModal"
              :closable="false"
              :confirm-loading="myBusinessModalLoading"
              @ok="myBusinessModalConfirm"
              @cancel="myBusinessModalCancel"
              :mask="false"
              :maskClosable="true"
              :bodyStyle="{}"
              :footer="null"
            >
              <a-card class="myBusinessModalCard" :body-style="{padding:'0 15px 15px',height: '500px'}" @click.stop>
                <a-tabs v-model:activeKey="myBusinessModalActiveKey" @change="myBusinessModalActiveKeyChange">
                  <!--我的申请-->
                  <a-tab-pane key="1">
                    <template slot="tab">
                      <span style="margin-right: 5px">{{$t('myapplication')}}</span>
                      <a-badge v-if="!this.myapplicationReadFlag" :count=" this.myapplication.length"
                               :number-style="{height:'15px',minWidth:'15px',lineHeight:'15px',padding:0,border:0}"/>
                    </template>
                    <div>
                      <div class="myBusinessModalCardListItem" v-for="item in myapplication" >
                        <div>审核时间</div>
                        <div>在 【 <span style="color: #0094ff;cursor: pointer">申请内容</span> 】 中，审核角色操作状态为 【 <span>{{ '已通过' }} 】</span>
                          】
                        </div>
                      </div>
                    </div>
                  </a-tab-pane>
                  <!--我的审核-->
                  <a-tab-pane key="2">
                    <template slot="tab">
                      <span style="margin-right: 5px">{{$t('myreview')}}</span>
                      <a-badge v-if="!this.myreviewReadFlag" :count="this.myreview.length"
                               :number-style="{height:'15px',minWidth:'15px',lineHeight:'15px',padding:0,border:0}"/>
                    </template>
                    <div>
                      <div class="myBusinessModalCardListItem" v-for="item in myreview" >
                        <div>创建时间</div>
                        <div>创建人发起了 【 <span style="color: #0094ff;cursor: pointer">申请内容</span> 】 的审核申请，待您处理</span>
                          】
                        </div>
                      </div>
                    </div>
                  </a-tab-pane>
                </a-tabs>
              </a-card>
            </a-modal>
          </div>
        </div>
        <a-dropdown :placement="'topCenter'" :getPopupContainer="getPopupContainer">
          <a class="ant-dropdown-link" @click="e => e.preventDefault()" style="font-size:1.4rem;display:block;height:38px;line-height:38px;">
            {{userInfo.name}}
<!--            <i class="iconfont icon-wode" :class="{active:this.$route.name === 'mineIndex'}"></i>-->
          </a>
          <a-menu slot="overlay">
            <a-menu-item v-show="false">
              <a @click="changeLang">{{ this.$t('changeLang') }}</a>
            </a-menu-item>
            <!--              <a-menu-item>
                            <a @click="changeUserInfo('name')">
                              {{ this.$t('modifyName') }}
                            </a>
                          </a-menu-item>
                          <a-menu-item>
                            <a @click="changePassword">
                              {{ this.$t('modifyPassword') }}
                            </a>
                          </a-menu-item>
                          <a-menu-item>
                            <a @click="changeUserInfo('email')">
                              {{ this.$t('modifyEmail') }}
                            </a>
            </a-menu-item>-->
            <a-menu-item>
              <a @click="changeUserInfo('remark')">{{ this.$t('modifyRemarks') }}</a>
            </a-menu-item>
            <a-divider type="horizontal" />
            <a-menu-item>
              <a @click="showOwnRoles()">{{ this.$t('linkedRole') }}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="showUserQuestion()">{{ this.$t('问题反馈') }}</a>
            </a-menu-item>
            <a-divider type="horizontal" />
            <a-menu-item>
              <a @click="handleLogout">
                <span>{{ $t('logOut') }}</span>
              </a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </div>
    <!-- 修改密码 -->
    <modify-password ref="modifyPassword"></modify-password>
    <!-- 修改用户(备注，邮箱，用户名) -->
    <edit-user-modal ref="editUserModal" v-bind="modalConfig.user.props"></edit-user-modal>
    <!-- 关联角色 -->
    <linked-role-list-modal ref="ownRoles"></linked-role-list-modal>
    <edit-lang-modal ref="editLang"></edit-lang-modal>
    <a-modal
      width="800px"
      :visible="userQuestionVisible"
      :title="$t('问题反馈')"
      :destroyOnClose="true"
      :maskClosable="false"
      :confirm-loading="userQuestionSaving"
      @cancel="() => userQuestionVisible=false"
      @ok="() => $refs.userQuestion.save().then(()=> userQuestionVisible=false)"
    >
      <UserQuestion ref="userQuestion" @saving="(v) => userQuestionSaving = v" v-if="userQuestionRichTextVisible"/>
    </a-modal>
  </div>
</template>

<script>
  import SMenu from './index'
  import { mixin, mixinDevice } from '@/utils/mixin'
  import modifyPassword from '@/components/SelfModal/ModifyPassword'
  import EditUserModal from '@/views/system/user/components/EditUserModal.vue'
  import LinkedRoleListModal from '@/views/system/user/components/LinkedRoleListModal.vue'
  import EditLangModal from '@/views/system/user/components/EditLangModal.vue'
  import UserQuestion from '@/views/user/UserQuestionForm'
  import {mapActions, mapState} from 'vuex'
  export default {
    name: 'profileDropdown',
    components: {
      modifyPassword,
      EditUserModal,
      LinkedRoleListModal,
      EditLangModal,
      UserQuestion,
      SMenu
    },
    mixins: [mixin, mixinDevice],
    props: {
    },
    computed: {
      ...mapState({
        userInfo: (state) => state.user.userInfo,
      }),
      mybusinessCount(){
        return !this.myapplicationReadFlag ? this.myapplication.length : 0 + !this.myreviewReadFlag ? this.myreview : 0
      },
    },
    watch: {
      userQuestionVisible(val) {
        this.$nextTick(() => {
          this.userQuestionRichTextVisible = val;
        })
      }
    },
    data() {
      return {
        modalConfig: {
          user: {
            // 需要绑定的属性
            props: {
              field: ''
            }
          }
        },
        myBusinessModal:false,
        myBusinessModalLoading:false,
        myBusinessModalActiveKey:'1',
        myapplication: [],
        myreview: [],
        myapplicationReadFlag:false,
        myreviewReadFlag:false,
        userQuestionSaving:false,
        userQuestionVisible:false,
        userQuestionRichTextVisible:false
      }
    },
    methods: {
      myBusinessModalActiveKeyChange(){
        if (this.myBusinessModalActiveKey == 2) {
          this.myreview = true
        }
      },
      ...mapActions(['Logout']),
      myBusinessModalConfirm(){

      },
      myBusinessModalCancel(){

      },
      getPopupContainer(triggerNode) {
        return document.getElementById('app')
      },
      // 退出登录
      handleLogout() {
        const that = this
        this.$confirm({
          title: that.$t('tip'),
          content: that.$t('logOutComfirm'),
          onOk() {
            return that.Logout().then(() => {
              if (process.env.NODE_ENV === 'development') {
                that.$router.push({
                  path: '/user/login',
                  query: {
                    redirect: that.$route.fullPath
                  }
                })
                // location.href = location.origin + '#/user/login?redirect=' + that.$route.fullPath
              } else {
                sessionStorage.clear();
                location.href =
                  process.env.VUE_APP_SSO_BASE_URL +
                  '/idp/authCenter/GLO?redirectToLogin=true&redirectToUrl=' +
                  process.env.VUE_APP_HOME_BASE_URL
              }
            })
          },
          onCancel() {}
        })
      },
      // 修改密码弹框
      changePassword() {
        this.$refs.modifyPassword.switchVisible(true)
      },
      // 修改用户(名称，邮箱，备注)弹框
      changeUserInfo(key) {
        this.modalConfig.user.props.field = key
        this.$nextTick(() => {
          this.$refs.editUserModal.switchVisible(true)
        })
      },
      // 查看用户关联的角色弹框
      showOwnRoles() {
        this.$refs.ownRoles.switchVisible(true)
      },
      // 查看用户反馈
      showUserQuestion() {
        this.userQuestionVisible = true;
      },
      // 查看用户关联的角色弹框
      changeLang() {
        this.$refs.editLang.switchVisible(true)
      }
    }
  }
</script>
<style lang="less" scoped>
  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    /*border-right: 0;*/
  }
  .accountBox {
    text-align: center;
    padding: 0 20px;

    /*border-right: 1px solid #ddd;*/
    .accountBoxInner {
      padding: 5px 0;
      /*border-top: 1px solid #ddd;*/
    }
    .iconfont {
      font-size: 2.6rem;
    }
    .ant-dropdown-link{
      color: white;
    }
  }

  .ant-btn:hover,
  .ant-btn:focus {
    color: black;
    background-color: #fff;
    border-color: #d9d9d9;
  }

  .accountBox-open {
    .iconfont {
      font-size: 2.6rem;
    }
  }
  .myBusinessModal{
    /deep/.ant-modal{
      position: absolute !important;
      right: 0 !important;
      z-index: 9;
      top: 38px !important;
    }
  }
  // /deep/.ant-modal-wrap{
  //   position: unset;
  // }
  .myBusinessModalCardListItem{
    text-align: left
  }
</style>
